import { useState, type FC } from "react";
import type { Product } from "../package1/GoodsDetail";
import { Button, Stepper } from "antd-mobile";

interface PopupProductProps {
  product?: Product;
  onClose?: () => void;
  onSubmitAdd?: (pro: Product) => void;
}
export const PopupProduct: FC<PopupProductProps> = (props) => {
  const { product, onClose, onSubmitAdd } = props;
  const [num, setNum] = useState(1);

  const handleChangeNum = (value: number) => {
    setNum(value);
  };
  const handleSub = () => {
    onSubmitAdd?.({ ...product!, num });
    onClose?.();
  };
  return (
    <div className="p-4">
      <div className="flex items-end">
        <div className="w-24">
          <img src={product?.image} alt="" />
        </div>
        <div className="ml-2">
          <div className="flex items-center ">
            <div className="text-red-500 font-sans">
              ¥<span className="text-xl font-bold">{product?.price}</span>
            </div>
            <div className="ml-1 text-xs text-white px-1.5 py-1 bg-red-500 rounded">
              到手价
            </div>
          </div>
          <div className="text-sm text-gray-400">x {num}</div>
        </div>
      </div>
      {/* 数量 */}
      <div className="flex justify-between items-center mt-3">
        <div>数量</div>
        <Stepper min={1} defaultValue={1} onChange={handleChangeNum}></Stepper>
      </div>
      {/* 确认按钮 */}
      <div style={{ width: "100%" }} className="fixed bottom-0 left-0 p-4">
        <Button
          style={{ width: "100%" }}
          size="middle"
          shape="rounded"
          color="danger"
          onClick={handleSub}
        >
          确认
        </Button>
      </div>
    </div>
  );
};
